<template>
    <div>
        <li>
            <div class="select">
                <input type="checkbox" v-model="goods.select" />
            </div>
            <div class="pic">
                <img :src="goods.pic" alt="" />
            </div>
            <div class="name">{{ goods.name }}</div>
            <div class="price">
                ￥ <span>{{ goods.price }}</span>
            </div>
            <div class="number">
                <button @click="sbustract">-</button>
                <input type="text" :value="goods.buy_num" />
                <button @click="add">+</button>
            </div>
            <div class="subtotal">
                ￥ <span>{{ subtotal }}</span>
            </div>
            <div class="del">
                <button @click="del">删除</button>
            </div>
        </li>
    </div>
</template>

<script>
export default {
    name: "Single",
    data() {
        return {};
    },
    watch: {},
    props: ["goods", "list"],
    methods: {
        // 添加
        add() {
            this.goods.buy_num < 15 && this.goods.buy_num++;
        },
        // 减少
        sbustract() {
            this.goods.buy_num > 0 && this.goods.buy_num--;
        },
        // 删除
        del() {
            const index = this.list.findIndex(
                (item) => item.id === this.goods.id
            );
            this.list.splice(index, 1);
        },
    },
    computed: {
        // 总价
        subtotal: {
            get() {
                return (this.subtotal = this.goods.buy_num * this.goods.price);
            },
            set() {},
        },
    },
};
</script>

<style></style>
